<template>
  <el-menu
    :collapse="collapse"
    :default-active="defaultActive"
    class="icesoft-menu transition-ease-in-out"
    router
    unique-opened
  >
    <template v-for="item in menu">
      <template v-if="item.isShow">
        <el-sub-menu v-if="item.children " :index="item.path">
          <template #title>
            <el-icon>
              <i-icon :icon="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="children in item.children"
            :index="children.path"
            @click="onSelect(children)"
          >
            <div class="d-flex align-center">
              <el-icon>
                <i-icon :icon="children.icon" />
              </el-icon>
              <span>{{ children.name }}</span>
            </div>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item
          v-else
          :index="item.path"
          @click="onSelect(item)"
        >
          <el-icon>
            <i-icon :icon="item.icon" />
          </el-icon>
          <template #title>
            <span>{{ item.name }}</span>
          </template>
        </el-menu-item>

      </template>
    </template>

  </el-menu>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/store/modulers/menu";
import IIcon from "~/icesoft/components/icon/IIcon.vue";
import { useSettingStore } from "~/store/modulers/setting";
import { Menu } from "~/api/system/menu/types";

defineProps({
  height: String,
});

const settingStore = useSettingStore();
const { collapse, asideWidth } = storeToRefs(settingStore);

const menuStore = useMenuStore();
const { defaultActive, openKeys, menu } = storeToRefs(menuStore);

function onSelect(menu: Menu) {
  menuStore.setActive(menu);
}

</script>

<style lang="scss">

.icesoft-menu {
  height: calc(100vh - 60px);
  border-color: transparent !important;

  --el-menu-bg-color: #030303 !important;
  --el-menu-text-color: #ffffffa6 !important;
  --el-menu-hover-bg-color: transparent !important;
  --el-menu-sub-item-height: 44px;
  --el-menu-item-height: 44px;

  .el-sub-menu {
    &.is-active {
      background-color: var(--el-menu-bg-color) !important;
    }

    &.is-opened {
      .el-sub-menu__title {
        color: white !important;
      }
    }
  }

  .el-menu-item {

    &:after {
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      position: absolute;
      content: "";
      border-radius: var(--el-border-radius-base);
      width: calc(100% - 8px);
      height: calc(100% - 4px);
      left: 4px;
      background-color: transparent !important;
    }

    &:hover {
      i, span, div {
        z-index: 1;
        color: white;
      }

      &:after {
        opacity: 0.7;
        background-color: var(--el-color-primary) !important;
      }
    }

    &.is-active {
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

      div, i, span {
        transition: background-color 0.3s ease;
        z-index: 1;
        color: white;
      }

      &:after {
        position: absolute;
        content: "";
        border-radius: var(--el-border-radius-base);
        width: calc(100% - 8px);
        height: calc(100% - 4px);
        left: 4px;
        background-color: var(--el-color-primary) !important;
      }
    }
  }

}


html.dark {
  .icesoft-menu {
    --el-menu-bg-color: --el-menu-bg-color !important;
    --el-menu-text-color: #ddd !important;
    --el-menu-hover-bg-color: transparent !important;

    .el-menu--inline {
      background-color: var(--el-bg-color-page);
    }
  }

}
</style>
